<template>
	<view class="index_padding">
		<view class="index_search">
			<image src="../../static/index/logo.png" mode=""></image>
			<u-search :placeholder="searchText" v-model="searchWord" disabled :show-action="false" input-align="center"
				class="index_sea" @click="tosearch"></u-search>
		</view>
		<view class="index_banner">
			<u-swiper :list="bannerImg" class="index_list" height="280" mode="none"></u-swiper>
		</view>
		<view class="index_btn">
			<!-- #ifndef H5 -->
			<view class="index_item" @click="saoBtn">
				<image src="../../static/index/sao.png" mode=""></image>
				<view class="index_name">扫一扫</view>
			</view>
			<!-- #endif -->
			<view class="index_item" @click="navTo('/pages/balance/invest')">
				<image src="../../static/index/chong.png" mode=""></image>
				<view class="index_name">充值</view>
			</view>
			<view class="index_item" @click="navTo('/pages/balance/balance')">
				<image src="../../static/index/yu.png" mode=""></image>
				<view class="index_name">余额</view>
			</view>
			<view class="index_item" @click="navTo('/pages/tong/tong')">
				<image src="../../static/index/tong.png" mode=""></image>
				<view class="index_name">通证</view>
			</view>
			<view class="index_item" @click="navTo('/pages/point/point')">
				<image src="../../static/index/ji.png" mode=""></image>
				<view class="index_name">积分</view>
			</view>
		</view>
		<view class="index_center">
			<view class="index_notice">
				<view class="index_small">
					<image src="../../static/index/notice.png" mode=""></image>
				</view>
			</view>
			<u-notice-bar class="index_run" color="#FB6821" :autoplay="true" mode="vertical" :list="noticeList" :volume-icon="false"
				type="none"></u-notice-bar>
		</view>
		<view class="boox">
			<image src="../../static/index/jf.png" mode="aspectFill"></image>
			<image src="../../static/index/jfq.png" mode="aspectFill"></image>
			<image src="../../static/index/tz.png" mode="aspectFill"></image>
		</view>
		<image src="../../static/index/bottombanner.png" mode="aspectFill" style="width: 690rpx;height: 260rpx;margin-top: 30rpx;"></image>
		<!-- 折线图 -->
		<view class="box">
			<view class="qiun-columns">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light" style="padding-left: 30rpx;">兑换率</view>
				</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	import {
		zhusu
	} from "../../api/user.js"
	export default {
		data() {
			return {
				bannerImg: [],
				noticeList: [],
				shopList: [],
				exChangeData: {},
				searchText: "华为mate40", //placeholder
				searchWord: '', //输入搜索字

				cWidth: '',
				cHeight: '',
				pixelRatio: 1,

			}
		},
		onLoad(e) {
			console.log(e)
			if (e.type) {
				if (uni.getStorageSync('userInfo')) {
					// 1住店 2 消费
					if (e.type == 1) {
						this.showMd("确认住店", () => {
							this.post(zhusu, {
								user_id: uni.getStorageSync('userInfo').id,
								shop_id: e.shopid
							}).then((res => {
								this.msg('核销成功')
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/settled/settled"
									})
								}, 1500)

							}))
						})
					} else {
						uni.navigateTo({
							url: "/pages/payment/payment?id=" + e.shopid
						})
					}
				} else {
					this.msg('请登录后再扫码', "none")
				}
			}
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		onShow() {
			this.getData()

		},
		methods: {
			tosearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			// 获取过去7天每天的日期
			getTime() {
				var myDate = new Date(); //获取今天日期
				myDate.setDate(myDate.getDate() - 7);
				var dateArray = [];
				var dateTemp;
				var flag = 1;
				for (var i = 0; i < 8; i++) {
					dateTemp = (myDate.getMonth() + 1) + "月" + myDate.getDate() + "日";
					dateArray.push(dateTemp);
					myDate.setDate(myDate.getDate() + flag);
				}
				return dateArray
				console.log(dateArray)
			},
			getServerData() {
				let day = this.getTime()
				let nums = []
				for (var i = 0; i < 8; i++) {
					let num = Math.random() + 0.8
					num = num.toFixed(2)
					nums.push(num)
				}
				let chartData = {
					categories: day,
					series: [{
							name: '通证兑换率',
							data: [0.8, 0.88, 0.89, 1, 1.05, 1.1, 1.2, 1.3],
							color: '#f29100'
						},
						{
							name: '积分兑换率',
							data: [0.65, 0.80, 0.89, 0.95, 1.0, 1.2, 1.25, 1.4],
							color: '#fa3534'
						},
					]
				}
				_self.showLineA("canvasLineA", chartData);
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 2,
						min: 0,
						max: 2,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			nav() {
				this.msg("正在开发，敬请期待", "none")
			},
			saoBtn() {
				// 允许从相机和相册扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log(res.result)
						let s = res.result
						if (s.indexOf("type") > -1) {
							if (uni.getStorageSync('userInfo')) {
								let url = res.result.split("?")[1]
								let arr = url.split("&")
								let type = null
								let id = null
								let obj = {}
								arr.forEach(item => {
									let ss = item.split("=")
									obj[ss[0]] = ss[1]
								})
								console.log(obj)
								type = obj.type
								id = obj.shopid
								if (type == 1) {
									this.showMd("确认住店", () => {
										this.post(zhusu, {
											user_id: uni.getStorageSync('userInfo').id,
											shop_id: id
										}).then((res => {
											this.msg('核销成功')
											setTimeout(() => {
												uni.navigateTo({
													url: "/pages/settled/settled"
												})
											}, 1500)
										}))
									})
								} else {
									uni.navigateTo({
										url: "/pages/payment/payment?id=" + id
									})
								}
							} else {
								this.msg('请登录后再扫码', "none")
							}

						} else {
							// #ifndef H5
							let url = res.result.split("#")[1]
							console.log(url)
							uni.navigateTo({
								url: url
							})
							// #endif
							// #ifdef H5
							window.location.href = res.result
							// #endif
						}
					}
				});
			},
			//统一跳转
			navTo(url, type = 0) {
				// type=0不要登录 1 需要登录
				if (type == 0) {
					uni.navigateTo({
						url: url
					})
				} else {
					if (this.Md.islogin()) {
						uni.navigateTo({
							url: url
						})
					}
				}
			},
			getData() {
				uni.request({
					url: this.baseUrl + '/Index/index',
					dataType: 'json', //默认 json格式
					method: 'GET', //请求方式
					data: {

					},
					success: (res) => {
						if (res.data.code == 1) {
							const bannerArr = []
							const json = res.data.data.banner
							for (var i in json) {
								bannerArr.push({
									image: json[i].image.file_path
								})
							}
							this.bannerImg = bannerArr
							const noticeArr = []
							const arr = []
							res.data.data.notice.forEach(item => {
								noticeArr.push(item.content)
								arr.concat(noticeArr)
							})
							this.noticeList = noticeArr
							this.shopList = res.data.data.product
							this.exChangeData = res.data.data.exchange_rate
						}
					},
					fail: (error) => {
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		image{
			width: 218rpx;
			height: 170rpx;
		}
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.qiun-textarea {
		height: 300upx;
	}

	.box {
		position: relative;
		left: -30rpx;
		margin-top: 40rpx;
	}

	.index_padding {
		padding: 0 30rpx;
		margin-top: 50rpx;

		.index_center {
			display: flex;
			height: 64rpx;
			line-height: 64rpx;
			margin-top: 50rpx;
			background: #FFEDB1;
			border-radius: 8px;
			.index_notice {
				height: 64rpx;
				// background: #E6FAEE;
				opacity: 1;
				border-radius: 32rpx;

				.index_small {
					margin-left: 21rpx;

					image {
						width: 40rpx;
						height: 33rpx;
						vertical-align: middle;
					}

					.index_notext {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						opacity: 1;
						margin-left: 10rpx;
					}
				}

			}

			.index_run {
				width: 500rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				opacity: 1;
				// margin-left: 24rpx;
			}
		}

		.index_search {
			display: flex;
			justify-content: space-between;
			height: 66rpx;

			image {
				width: 66rpx;
				height: 66rpx;
				margin-right: 44rpx;
			}

			.index_sea {
				width: 600rpx;
				height: 60rpx;
				background: #F6F6F6;
				opacity: 1;
				border-radius: 30rpx;
				color: #999999;
				font-size: 22rpx;
				opacity: 1;
				padding-top: 6rpx;
			}

		}

		.index_banner {
			width: 690rpx;
			height: 280rpx;
			margin-top: 38rpx;

			.index_list {
				width: 690rpx;
				height: 280rpx;
			}
		}

		.index_btn {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.index_item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: center;
				height: 140rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				.index_name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					opacity: 1;
				}
			}
		}

		.index_footer {
			display: flex;
			justify-content: space-between;
			width: 690rpx;
			height: 455rpx;
			margin-top: 40rpx;

			.index_ftl {
				padding: 0 14rpx;
				width: 240rpx;
				background: #B3DFC4;
				opacity: 1;
				border-radius: 8px;

				.index_fitem {
					margin-top: 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 99rpx;

					.index_ftext {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
						opacity: 1;
					}

					.index_fd {
						width: 212rpx;
						height: 52rpx;
						text-align: center;
						line-height: 52rpx;
						background: #FFFFFF;
						opacity: 1;
						border-radius: 8px;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #06923D;
					}
				}
			}

			.index_ftr {
				width: 422rpx;
				border: 1px solid #B3DFC4;
				border-radius: 8px 8px 0px 0px;

				.index_box {
					display: flex;
					justify-content: space-between;
					height: 330rpx;
					padding: 31rpx 28rpx 33rpx 26rpx;

					.index_ftop {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.index_fimg {
							width: 170rpx;
							height: 210rpx;

							image {
								width: 170rpx;
								height: 210rpx;
							}
						}

						.index_ftxt {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
							opacity: 1;
							width: 170rpx;
							overflow: hidden;
							/*超出部分隐藏*/
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							white-space: nowrap;
							/*规定段落中的文本不进行换行 */
						}
					}
				}

				.index_ffoot {
					width: 420rpx;
					height: 125rpx;
					background: #B3DFC4;
					opacity: 1;
					border-radius: 0px 0px 8rpx 8rpx;
					padding: 20rpx 0 17rpx 30rpx;

					.index_jifen {
						height: 33rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 33rpx;
						color: #333333;
						opacity: 1;
					}

					.index_start {
						height: 45rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 45rpx;
						color: #06923D;
						opacity: 1;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>
